<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
	<title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title>
	<style type="text/css">
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dojox/layout/resources/RadioGroup.css";
	    body, html { margin:0; padding:0; width:100%;
			font-family:Arial,sans-serif;
		}
		
		#content {
			height:300px;
			border-left:1px solid #333;
			border-right:1px solid #333;
		}
		
		#container {
			top:150px;
			width:720px;
			margin:0 auto;
		}
		#header {
			position:relative;
			height:90px;
			border-bottom:1px solid #dedede;
		}
		#dojoLink, #dijitLink, #dojoxLink {
			background:#dedede;
			position:absolute;
			bottom:0;
			width:200px;
			padding:0;
			cursor:pointer;
		}
		#dojoLink {
			left:20px;
		}
		#dojoxLink {
			left:460px;
		}
		#dijitLink {
			left:240px;
		}
		.fisheyeTarget {
			position:relative;
			bottom:0;
			left:0;
			height:1px;
			width:1px;
			cursor:pointer;
		}
		.inner {
			cursor:pointer;
			position:absolute;
			bottom:5px;
			margin-left:10px;
		}
		.subtext {
			visibility:hidden;
			position:absolute;
			bottom:27px;
			left:10px;
			font:8pt Arial,sans-serif;
			color:#666;
		}
		.cpContent {
			padding:15px;
		}
		.cp {
			background:#bebebe;
			color:#666;
		}
	</style>
	<script type="text/javascript">
		var djConfig = { isDebug:true, parseOnLoad:true };
	</script>
	<script type="text/javascript" src="../../../dojo/dojo.js"></script>
	<script type="text/javascript" src="../FisheyeLite.js"></script>
	<script type="text/javascript">
		dojo.require("dojo.parser");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dojox.layout.RadioGroup");
		dojo.require("dojox.widget.FisheyeLite");
		dojo.require("dojox.fx.easing");
		dojo.addOnLoad(function(){
			dojo.query(".headLink").forEach(function(n){

				var linkto = dojo.attr(n,"id") + "Pane";
				
				var widget = new dojox.widget.FisheyeLite({
					properties: {
						height:45
					},
					easeOut:dojox.fx.easing.bounceOut,
					durationOut:700
				},n);
				
				var myTarget = dojo.query(".subtext",n)[0];
				if(myTarget){
					
					dojo.style(myTarget,{ opacity:"0", visibility:"visible" });
					
					var _anim = null;
					dojo.connect(widget,"show",function(e){
						_anim && _anim.status && _anim.stop();
						_anim = dojo.fadeIn({ node: myTarget, duration:250 });
						_anim.play();
					});
					dojo.connect(widget,"hide",function(e){
						_anim && _anim.status && _anim.stop();
						_anim = dojo.fadeOut({ node: myTarget, duration:250 });
						_anim.play();
					});
				}
				
				dojo.connect(n,"onclick",function(e){	
					dijit.byId("content").selectChild(dijit.byId(linkto));
				});
			
			});
			
			dojo.query(".cp").instantiate(dijit.layout.ContentPane);			
			dojo.query("#content").forEach(function(n){
				new dojox.layout.RadioGroupSlide({
					hasButtons:false
				},n).startup();
			});
		});			
	</script>
    </head>
    <body class="tundra">
		
		<div id="container">
			<div>
			<h2>The Dojo Toolkit:</h2>	
			</div>
			<div id="header">
				<div class="headLink" id="dojoLink">
					<div class="fisheyeTarget"></div>
					<div class="inner">Dojo Base</div>
					<span class="subtext">the JavaScript Toolkit</span>
				</div>
				<div class="headLink" id="dijitLink">
					<div class="fisheyeTarget"></div>
					<div class="inner">Dijit</div>
					<span class="subtext">Themeable, extensible widget system</span>
				</div>
				<div class="headLink" id="dojoxLink">
					<div class="fisheyeTarget"></div>
					<div class="inner">DojoX</div>
					<span class="subtext">Extensions, experiments, and extras</span>
				</div>
			</div>
			<div id="content">
				<div class="cp" id="dojoLinkPane">
					<div class="cpContent">
					Dojo Pane
					</div>
				</div>
				<div class="cp" id="dijitLinkPane">
					<div class="cpContent">
					Dijit Pane
					</div>
				</div>
				<div class="cp" id="dojoxLinkPane">
					<div class="cpContent">
					DojoX Pane
					</div>
				</div>
			</div>
		</div>
		
    </body>
</html>